{% extends "base.html" %}

{% block title %}文章归档 - 晨光博客{% endblock %}

{% block content %}
<div class="archives-container">
    <h1>文章归档</h1>

    {% for year, posts in archives.items()|sort(reverse=True) %}
    <div class="archive-year">
        <h2>{{ year }}年</h2>
        <div class="archive-posts">
            {% for post in posts %}
            <div class="archive-post">
                <time datetime="{{ post.date }}" class="post-date">
                    {{ post.date.strftime('%m月%d日') }}
                </time>
                <a href="{{ url_for('posts.show_post', slug=post.slug) }}" class="post-title">
                    {{ post.title }}
                </a>
                <span class="post-views">
                    <i class="fas fa-eye"></i> {{ post.views }}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_css %}
<style>
    .archives-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
    }

    .archive-year {
        margin-bottom: 2.5rem;
    }

    .archive-year h2 {
        font-size: 1.8rem;
        color: var(--apple-dark-gray);
        border-bottom: 2px solid var(--apple-blue);
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .archive-posts {
        display: grid;
        gap: 1rem;
    }

    .archive-post {
        display: flex;
        align-items: center;
        padding: 0.8rem 1rem;
        background: rgba(255,255,255,0.9);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .archive-post:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .post-date {
        color: #666;
        min-width: 80px;
        font-size: 0.9rem;
    }

    .post-title {
        flex: 1;
        color: var(--apple-dark-gray);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .post-title:hover {
        color: var(--apple-blue);
    }

    .post-views {
        color: #999;
        font-size: 0.9rem;
        min-width: 60px;
        text-align: right;
    }

    /* 暗色主题样式 */
    .dark-theme .archive-post {
        background: rgba(30,30,30,0.9);
    }

    .dark-theme .post-title {
        color: #e0e0e0;
    }

    .dark-theme .post-date,
    .dark-theme .post-views {
        color: #aaa;
    }
</style>
{% endblock %}